<template>
  <dv-border-box-8 :reverse="true" style="width: 100%; height: 100%;">
    <!-- 初始化ECharts容器，ref属性用于获取标签 -->
    <div ref="charts" style="width: 100%; height: 100%"></div>
  </dv-border-box-8>
</template>

<script>
// 导入 ECharts
import * as echarts from 'echarts'
// 导入中国地图的 json 数据
import zhejiangJson from '@/assets/json/zhejiang.json'

export default {
  name: 'ECharts',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      echarts.registerMap('zhejiang', zhejiangJson)
      const myChart = echarts.init(this.$refs.charts)
      const option = {
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(255, 255, 255, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: true,
          textStyle: {
            color: '#DADADA',
          },
          showDelay: 100,
          formatter: (params) => {
            return params.name
          },
        },
        geo: {
            map: 'zhejiang',
            label: {},
            roam: true,
            itemStyle: {}
        },
        itemStyle: {
          areaColor: '#3056ce',
          borderWidth: 0.5
        },
        // 设置鼠标移上去高亮的样式
        emphasis: {
          itemStyle: {
            borderColor: '#34AEAE',
            areaColor: '#CCEBEB',
            borderType: 'solid',
            color: '#fff',
          },
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            // 涟漪特效相关配置
            rippleEffect: {
              number: 3,
              period: 4,
              brushType: 'stroke',
              scale: 5,
              color: '#FFF',
            },
            data: [
              {
                name: '杭州',
                value: [120, 28.21, 5]
              },{
                name: '杭州',
                value: [120.23, 28.35, 5]
              },{
                name: '金华',
                value: [121.35, 29.31, 5]
              },{
                name: '绍兴',
                value: [121.35, 28.61, 5]
              },
            ],
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
